<template>
  <div class="roleManage">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="6">
        <el-input v-model="form.RoleID" placeholder="请输入角色名称"></el-input>
      </el-col>
      <el-col :span="6" class="overflow-clear">
        <el-button type="primary" @click="searchRoleInfo" class="float-left">立即搜索</el-button>
      </el-col>
    </el-row>
    <hr>
    <div class="clearfix mb-5">
      <el-button-group class="float-right">
        <el-button type="primary" @click="newRole">添加角色</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="roleTable"
      style="width: 100%">
      <el-table-column
        prop="roleID"
        label="角色编号"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="isUse"
        label="是否启用"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="remark1"
        label="备注"
        min-width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="126">
        <template scope="scope">
          <el-button icon="edit" type="text"
                     @click="updateRoleInfo(scope.row.roleID)"></el-button>
          <el-button icon="delete" type="text"
                     @click="deleteRow(scope.$index,roleTable,scope.row.roleID)"></el-button>
          <el-button icon="setting" type="text"
                     @click="getRoleTree(scope.row.roleID)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="roleTitle" v-model="dialogFormVisible">
      <el-form :model="roleForm">
        <el-form-item label="角色编号" :label-width="formLabelWidth">
          <el-input v-model="roleForm.roleID"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-radio class="radio" v-model="roleForm.isUse" label="启用"></el-radio>
          <el-radio class="radio" v-model="roleForm.isUse" label="禁用"></el-radio>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input v-model="roleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="roleForm.remark1" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-show="!updateState" type="primary" @click="addRole">确 定</el-button>
        <el-button v-show="updateState" type="primary" @click="UpdateRole">修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="权限管理" v-model="dialogTreeVisible">
      <el-tree
        ref="tree"
        :data="tree"
        show-checkbox
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTreeVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmQX">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'roleManage',
    data(){
      return {
        form: {
          roleID: ''
        },
        roleForm: {
          roleID: '',
          roleName: '',
          isUse: '',
          description: '',
          remark1: ''
        },
        roleTable: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        roleTitle: '添加角色信息',
        updateState: false,
        dialogTreeVisible: false,
        tree: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        defaultExpandedKeys: [],
        defaultCheckedKeys: [],
        roleID: '',
        treeData: '',
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        this.initTable();
        this.getTree();
      },
      searchRoleInfo() {
        this.getRoleInfo();
      },
      getRoleInfo() {
        this.$http.post(this.$until.url + '/dictionary/getDictionnaryByUpId', this.form).then(response => {
          this.roleTable = response.body.dictionary;
          console.log(response.body.dictionary);
        }, response => {
          console.log('文件获取失败');
        });
      },
      getTree(){
        this.$http.get(this.$until.url + '/role/getAllQX').then(response => {
          this.tree = response.body
        }, response => {
          console.log('文件获取失败');
        });
      },
      initTable() {
        this.$http.get(this.$until.url + '/role/getRole').then(response => {
          this.roleTable = response.body
        }, response => {
          console.log('文件获取失败');
        });
      },
      deleteRow: function (index, rows, roleID) {
        this.$confirm('此操作将永久删除该字典信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRoleInfo(roleID);
          rows.splice(index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteRoleInfo(roleID){
        this.$http.post(this.$until.url + '/role/deleteRole', {roleID: roleID}, {emulateJSON: true})
          .then(response => {
            this.$message({
              message: response.body.message,
              type: 'success'
            });
          }, response => {
            this.$message.error('删除失败');
          });
      },
      clearRoleForm(){
        for (var key in this.roleForm) {
          this.roleForm[key] = ''
        }
      },
      newRole(){
        this.clearRoleForm();
        this.updateState = false
        this.roleTitle = '添加角色信息'
        this.dialogFormVisible = true
      },
      addRole(){
        this.$http.post(this.$until.url + '/role/addRole', this.roleForm, {emulateJSON: true}).then(response => {
          this.initTable();
          alert("添加成功");
        }, response => {
          console.log('文件获取失败');
        });
        this.dialogFormVisible = false
      },
      updateRoleInfo(roleID){
        this.$http.post(this.$until.url + '/role/getOneRole', {roleID: roleID}, {emulateJSON: true}).then(response => {
          this.roleForm = response.body;
        }, response => {
          console.log('文件获取失败');
        });
        this.updateState = true
        this.roleTitle = '修改角色信息'
        this.dialogFormVisible = true
      },
      UpdateRole(){
        this.$http.post(this.$until.url + '/role/updateRole', this.roleForm, {emulateJSON: true}).then(response => {
          this.initTable();
          alert("修改成功");
        }, response => {
          console.log('文件获取失败');
        });
        this.dialogFormVisible = false
      },
      getRoleTree(roleID){
        var msg = [], data = [];
        this.roleID = roleID;
        this.defaultExpandedKeys = [];
        this.defaultCheckedKeys = [];
        this.$http.post(this.$until.url + '/role/getRoleQX', {roleID: roleID}, {emulateJSON: true}).then(response => {
          msg = response.body.first
          data = response.body.child
          for (var value of msg) {
            this.defaultExpandedKeys.push(value.menuID)
          }
          for (var value of data) {
            this.defaultCheckedKeys.push(value.menuID)
          }
          this.getTree();
          this.dialogTreeVisible = true
          //console.log(this.defaultCheckedKeys)
        }, response => {
          console.log('文件获取失败');
        });
      },
      confirmQX(){
        this.getOriginData();
        var msg = "";
        msg = this.treeData.join(",");
        this.$http.post(this.$until.url + '/role/addRoleQX', {menuID: msg},
          {//请求参数
            params: {
              roleID: this.roleID
            },
            emulateJSON: true
          }).then(response => {
          this.dialogTreeVisible = false
          this.$message({
            message: '设置成功',
            type: 'success'
          });
        }, response => {
          console.log('文件获取失败');
        });
      },
      getOriginData(){
        var msg = [];
        msg = this.$refs.tree.getCheckedKeys();
        for (var data of msg) {
          for (var value of this.tree) {
            for (var ele of value.children) {
              if (data == ele.id) {
                msg.push(value.id)
                continue
              }
            }
          }
        }
        this.treeData = msg
      }
    }
  }
</script>
